<template>
    <div class="category">
         <h3>考试分类</h3>
         <nav>
             <ul>
                 <li 
                 v-for="(item) in exam.categories" 
                 :key="item.id" 
                 :class="num == item.id ? 'active':''"
                 @click="addCategory(item.id)"
                 >
                     {{ item.text }}
                 </li>
             </ul>
         </nav>
         <h3>试卷列表</h3>
         <section>
            <ul>
                <li 
                v-for="(item) in arr" 
                :key="item.eid">
                <router-link :to="{path:'/detail',query: {eid: item.eid}}"> 
                    <van-icon name="edit" />
                    {{ item.name }} </router-link></li>
            </ul>
         </section>
    </div>
</template>
<style lang="less">
@import '../common/less/varible.less';
.category {
    padding: @pad;
    margin: 10px 10px;
    h3 {
        font-size: 18px;
        height: 50px;
        line-height: 50px;
        border-bottom: 3px solid #000;
        width: 100px;
    }
    nav {
         ul {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            li {
                padding: 8px 15px;
                border: 1px solid #ccc;
                margin: 10px 10px 0 0;
                font-size: 16px;
                border-radius: 4px;
                &.active {
                    background-color: @bgColor;
                    color: #fff;
                    border-color: @activeColor;
                }
            }
         }
    }
    section {
        ul {
            li {
                a {
                    display: block;
                    font-size: 16px;
                    padding: 10px 0;
                    border-bottom: 1px solid #ccc;
                }
            }
        }
    }
}

</style>

<script>
import { mapState } from 'vuex'

export default {    
    
    computed: {
         ... mapState(['exam'])
    },
    data(){
        return {
            num: 0,
            arr: []
        }
    },
    methods: {
       async addCategory(id){
            this.num = id;
            // console.log(this.exam);
            // 所有试卷
            let examination = this.exam.examination;
            // console.log({id});
            // 循环数据
            let arr =  examination.filter(item => {
                return item.id == id;
            })
            // 赋值
            this.arr = arr;
        }
    },
    created(){
        // 调用actions对象下的方法
        // this.$store.dispatch('exam/addCateGoryFn')
        // this.$store.dispatch('exam/addExaminationFn')
        // console.log(this.$store.state.exam)
        // 初始化 （默认显示前端试卷列表）
        // this.addCategory(1);
        // 控制代码执行的先后顺序
        const init = async () => {
            // 先执行网络请求
            this.$store.dispatch('exam/addCateGoryFn')
            this.$store.dispatch('exam/addExaminationFn')
        }

        // 调用init返回promise实例
        init()
        .then(
            ()=> {
                // 延迟执行 试卷列表渲染
                setTimeout(()=>{
                    this.addCategory(1)
                },150)
            }
        )

    }
}

</script>